/**
 * swiper轮播图效果
 * @param {string} el 
 * @param {*} options 
 */

function Swiper(el,options={}){
    this.el=document.querySelector(el)
    this.t=null
    this.num=1
    this.init()

}

Swiper.prototype.init=function() {
    this.start()
    this.pointOver()
}
//分页器 铺垫1
Swiper.prototype.changePoint=function(){
    this.el.querySelector('ul li.active').className=''
    this.el.querySelector(`li:nth-of-type(${this.num})`).className='active'
}
//轮播图 铺垫2
Swiper.prototype.changeImg=function(){
    this.el.querySelector('img').src=`./imgs/img${this.num}.jpg`
}
//计时器
Swiper.prototype.start=function(){
    this.t=setInterval(()=>{
    this.num++
    if(this.num>6)  this.num=1
    this.changeImg()
    this.changePoint()
    },1000)
}
//鼠标移入分页器
Swiper.prototype.pointOver=function(){
    let ulLiObjs=this.el.querySelectorAll('ul li')
    ulLiObjs.forEach((item,i)=>{
        item.onmouseover=()=>{
            clearInterval(this.t)
            this.num=i+1
            this.changeImg()
            this.changePoint()
        }
        item.onmouseout=()=>{
            this.start()
        }
    })
}

export default Swiper;
